<template>
  <view class="content">
    <top-search :showState="false" :showProduct="true" :showMore="false" :showCarNo="false" :showCustomer="false"
      :showSearch="false" @bindChange="confirmChange"></top-search>
    <!-- 头部搜索-->
    <view class="btn bott-btn">
      <button class="new fntw600" type="primary" @click="handleAdd">
        +添加产品
      </button>
    </view>
    <!-- 排号信息列表 -->
    <view class="phxx-list">
      <view class="item" :key="item.id" v-for="(item, index) in productList">
        <product-card :data="item" @successFun="successFun"></product-card>
      </view>
      <uni-load-more :status="isMore" />
    </view>
  </view>
</template>

<script>
  import { getProductList } from '@/api/product';
  import { getDictList } from '@/api/login';
  import { getDriverId } from '@/utils/auth';

  export default {
    data() {
      return {
        proName: '',
        isMore: 'more',
        coalTypeList: [],
        productList: [],
        queryParam: {
          pageNo: 1,
          pageSize: 10
        }
      };
    },

    async onLoad() {
      this.queryParam.pageNo = 1;
      this.isMore = 'more';
      this.productList = [];
      await this.getDictList();
      this.getProductList();
    },

    onPullDownRefresh() {
      this.queryParam.pageNo = 1;
      this.isMore = 'more';
      this.productList = [];
      this.getProductList();
    },

    onReachBottom() {
      if (this.isMore == 'more') {
        this.queryParam.pageNo++;
        this.getProductList();
      }
    },

    methods: {
      handleAdd() {
        uni.setStorageSync('title', '添加产品');
        uni.navigateTo({
          url: '/packageA/pages/common/product-editting/index'
        });
      },

      handleDetail(id) {
        uni.redirectTo({
          url: `/packageA/pages/common/product-details/index?id=${id}`
        });
      },

      successFun() {
        this.getProductList()
      },

      confirmChange(data) {
        this.proName = data.proName;
        this.queryParam.pageNo = 1;
        this.isMore = 'more';
        this.productList = [];
        this.getProductList();
      },

      async getDictList() {
        const res = await getDictList();
        if (res.code === 0) {
          this.coalTypeList = (res?.data || []).filter(
            (e) => e.dictType === 'coal_type'
          );
        }
      },

      //获取排号信息列表
      async getProductList() {
        try {
          const data = this.queryParam;
          data['userId'] = getDriverId();
          if (this.proName) {
            data['proName'] = this.proName;
          } else {
            delete data['proName']
          }
          const res = await getProductList(data);

          if (res.code == 0) {
            const result = res.data.list || [];
            if (this.queryParam.pageNo == 1) {
              this.productList = [
                ...result
              ];
            } else {
              this.productList = [
                ...this.productList,
                ...result
              ];
            }
            if (res?.data?.total == this.productList.length) {
              this.isMore = 'noMore';
            } else {
              this.isMore = 'more';
            }
          }
          wx.stopPullDownRefresh();
        } catch (e) {
          return false;
        }
      },

      exchangeCoalTypeLabel(result) {
        return result.map((e) => {
          e.productType = this.coalTypeList.find(
            (m) => m.value === e.productType.toString()
          )?.label;
          return e;
        });
      }
    }
  };
</script>

<style lang="scss" scoped>
  .phxx-list {
    padding: 16rpx 20rpx 68rpx 20rpx;

    .item+.item {
      margin-top: 10px;
    }

    .item {
      padding: 0;
      background: #fff;
    }
  }
</style>